<template>
	<view class="business">
		<view class="inputlist">
			<view class="left">
				<text>处理方式</text>
			</view>
			<view class="right">
				<picker mode="selector" :range="handleList" @change="handleChoose">
					<view class="picker_text">{{handle}}</view>
				</picker>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text>退款原因</text>
			</view>
			<view class="right">
				<picker mode="selector" :range="refundList" @change="refundChoose">
					<view class="picker_text">{{refund}}</view>
				</picker>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text>退款说明</text>
			</view>
			<view class="right">
				<input placeholder="请输入退款说明" type="number" v-model="recommend" placeholder-class="inputColor">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text>退款金额</text>
			</view>
			<view class="right">
				<input type="text" :value="price" disabled>
			</view>
		</view>

		<view class="imgbox">
			<view class="title">
				上传凭证：
			</view>
			<fjj-images :pageImgList="wximg" @getwximgurl="getwximgurl" :type="geturl[1]" :imgCount="1"
				@addImg="editParkImg"></fjj-images>
		</view>
		<view class="tips">
			*提示：您可退款的最大金额为{{price}}
		</view>
		<view class="btn">
			<button class="btn_sumbit" @click="OrderRefund">提交</button>
		</view>

	</view>


</template>

<script>
	import {
		RefundApply,
		OrderRefund
	} from "@/api/user.js"
	export default {
		data() {
			return {
				geturl: ['getwximgurl', 'getzfbimgurl'],
				businessName: '',
				handleList: [],
				handle: '请选择处理方式', //处理方式
				refund: '请选择退款方式', //退款原因
				refundList: [],
				imgs: '',
				price: 0,
				recommend: '',
				wximg: [],
				wx_img: '',
				id: ''
			}
		},
		onLoad(e) {
			this.price = e.num
			this.id = e.id
			this.RefundApply()
		},
		onShow() {},
		methods: {
			RefundApply() {
				RefundApply().then(res => {
					this.handleList = res.data.type
					this.refundList = res.data.reason
				})
			},
			OrderRefund() {
				OrderRefund({
					refund_type: this.handle, //处理方式
					refund_reason: this.refund, //退款方式
					refund_detail: this.recommend, //退款说明
					img: this.wx_img,
					id: this.id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1000)
					}
				})
			},
			getwximgurl(e) {
				this.wx_img = e[0]
				console.log(e)
			},
			handleChoose(e) {
				let i = e.detail.value
				this.handle = this.handleList[i]
			},
			refundChoose(e) {
				let i = e.detail.value
				this.refund = this.refundList[i]
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.tips {
		font-size: 14px;
		padding: 10px;
		color: #ff7272;
	}

	.btn {
		margin-top: 15px;

		.btn_sumbit {
			background: #ff3939;
			color: #fff;
			width: 80%;
			font-size: 14px;
			box-sizing: border-box;
		}
	}

	.imgbox {
		font-size: 14px;
		padding: 10px;
		background-color: #fff;

		image {
			margin-top: 10px;
			width: 100px;
		}
	}

	.inputlist {
		background-color: #fff;
		display: flex;
		font-size: 14px;
		padding: 10px;
		border-bottom: 1px solid #eee;

		.left {
			width: 30%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: red;
				margin-right: 3px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
				color: #000;
			}

			.inputColor {
				color: #ccc;
			}


		}
	}
</style>
